import React, { PureComponent } from 'react';
import { RouteComponentProps, withRouter } from 'react-router';
import CheckPassIcon from '@/assets/images/face-finished.png';
import CheckFailIcon from '@/assets/images/check-faild.png';
import { getQueryString } from '@/common/utils';
import { connect } from 'react-redux';
import Services from './services';
import md5 from 'md5';
import RSAEncrypt from '@/common/rsa-encrypt';
import { btnText, desText, goJDHome, pageTitle } from './comm';
import './index.less';
interface CheckInfoProps extends RouteComponentProps {
  history: any;
  TXInfo: any;
  updateTXInfo: (payload: any) => Promise<any>;
}
interface CheckInfoState {
  type: any;
}

const imgSrc = {
  '3': CheckPassIcon,
  '4': CheckPassIcon,
  '5': CheckFailIcon
};

class CheckResult extends PureComponent<CheckInfoProps, CheckInfoState> {
  constructor(props: CheckInfoProps) {
    super(props);
    this.state = {
      type: '3'
    };
  }

  async componentDidMount() {
    if (!this.props.TXInfo.phone) {
      this.props.history.replace(`/`);
      return;
    }
    //step  3  待审核 ；4  审核通过；5  审核不通过
    let type = getQueryString('type') || '3';
    this.setState({
      type: type
    });
    document.title = pageTitle[type];
  }

  // 再次认证修改 状态
  updateOperationState = async () => {
    let phoneNum = RSAEncrypt.encrypt(this.props.TXInfo.phone);
    let t = new Date().getTime();
    const encStr = md5(`${phoneNum}${t}${RSAEncrypt.MD5KEY}`);
    let params = {
      phoneNum,
      t,
      encStr
    };
    let result = (await Services.updateOperationState(params)) || '';
    if (result) {
      this.props.history.push(`/`);
    }
  };
  //审核页面按钮  去京东首页  再次认证
  goLinkUrl = (type: any) => {
    switch (type) {
      case '3':
      case '4':
        goJDHome();
        break;
      case '5':
        this.updateOperationState();
    }
  };

  render() {
    const { type } = this.state;
    const checkDesc = this.props.TXInfo.checkDesc;
    return (
      <div className="check-result">
        <img src={imgSrc[type]} alt="icon" className="check-result-icon" />

        {(type === '3' || type === '4') && (
          <div className="check-result-text">
            {desText[type][0]} <br />
            {desText[type][1]}
          </div>
        )}

        {type === '5' && (
          <div className="check-result-text">
            {desText[type][0] + checkDesc + desText[type][1]}
          </div>
        )}

        <div
          className="check-result-btn confirm-wrapper-btn"
          onClick={() => {
            this.goLinkUrl(type);
          }}
        >
          {btnText[type]}
        </div>
      </div>
    );
  }
}

// @ts-ignore
const mapState = ({ CardReSold }) => ({
  TXInfo: CardReSold.TXInfo
});

// @ts-ignore
const mapDispath = ({ CardReSold }) => ({
  updateTXInfo: CardReSold.updateTXInfo
});

// @ts-ignore
export default connect(mapState, mapDispath)(withRouter(CheckResult));
